<template>
	<!-- 轮播图组件 -->
	<!-- <view :class="'bg-'+theme.backgroundColor"> -->
	<view class="bg-white">
		<view v-show="newData.swiperType=='card-swiper'"
			:style="{ backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1?'':newData.background:newData.background, height: `${(newData.height)-0+28}rpx` }"
			:class="newData.background ?  newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-'+thememobile.backgroundColor ">
		</view>
		<view :style="{
				padding: `${newData.swiperType=='card-swiper'?'0 28rpx':''}`, 
				marginTop: `${newData.swiperType=='card-swiper'? '-'+(newData.height)+'rpx':''}`}">
			<swiper class="screen-swiper " :class="newData.dotStyle=='square-dot' ? 'square-dot' : 'round-dot'"
				:indicator-dots="true" :circular="true" :autoplay="true" :interval="newData.interval" duration="500"
				@change="cardSwiper" indicator-color="#cccccc" indicator-active-color="#ffffff"
				:style="{height: `${newData.height*2}rpx`,borderRadius: `${newData.borderRadius==1?'12':'0'}rpx`}">
				<swiper-item v-for="(item,index) in newData.swiperList" :key="index" :class="cardCur==index?'cur':''"
					@tap="jumpPage(item.pageUrl)">
					<image :src="item.imageUrl" :style="{height: `${newData.height*2}rpx`}">
					</image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	// import {
	// 	pageUrls
	// } from '../div-base/div-page-urls.js'
	export default {
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						swiperType: 'screen-swiper',
						height: 150,
						interval: 3000,
						borderRadius: 0,
						imageSpacing: 0,
						swiperList: []
					}
				}
			}
		},
		components: {},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				cardCur: 0,
				pageUrls: pageUrls
			};
		},

		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			jumpPage(page) {
				if (page) {
					uni.navigateTo({
						url: page,
						fail: () => {
							uni.switchTab({
								url: page
							});
						}
					});		
					// if (this.pageUrls.tabPages.indexOf(page) != -1) {
					// 	uni.switchTab({
					// 		url: page
					// 	});
					// } else {
					// 	uni.navigateTo({
					// 		url: page
					// 	});
					// }
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen-swiper {
		min-height: 90rpx !important;
		overflow: hidden;
	}
</style>
